<template>
  <!-- 
    表格封装问题：
    1. 数据写死了，希望往组件内部传入表格数据，传数据？父传子
    2. 结构写死了，希望往组件内部传入表格结构，th/td，传结构？插槽

    步骤：
    1. 先准备两个插槽，头部，主体，写了两个具名插槽
    2. 使用的时候，发现主体部分，有数据要用(item index)
    3. 利用作用域插槽，将item index提供在插槽上，供使用组件时渲染
    4. 补上my-tag标签
  -->
  <table class="my-table">
    <thead>
      <tr>
        <slot name="head"></slot>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="item.id">
        <!-- 给你一行的数据, 给你下标 -->
        <slot name="row" :item="item" :index="index"></slot>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    // data: Array
    data: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="less" scoped>
.my-table {
  width: 100%;
  border-spacing: 0;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }
  th {
    background: #f5f5f5;
    border-bottom: 2px solid #069;
  }
  td {
    border-bottom: 1px dashed #ccc;
  }
  td,
  th {
    text-align: center;
    padding: 10px;
    transition: all .5s;
    &.red {
      color: red;
    }
  }
  .none {
    height: 100px;
    line-height: 100px;
    color: #999;
  }
}
</style>
